<script>
  // 这是一个评论组件

  import sheep from '@/sheep';
  import dayjs from 'dayjs';

  export default {
    name: 'index',
    props: {
      width: {
        type: [String, Number],
        default: '656rpx',
      },
      background:{
        type: String,
        default: '#F5F5F5',
      },
      commentsList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      isShowReply: {
        type: Boolean,
        default: true,
      },
      isPhoto: {
        type: Boolean,
        default: false,
      },
      is_share: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      totalComments() {
        let num = 0;
        this.commentsList.forEach(item => {
          num++;
          if (!!item.children && item.children.length > 0) {
            num += item.children.length;
          }
        });
        return num;
      },
    },
    methods: {
      dayjs,
      async topLevelReplies(info) {
        if (info.is_my == 1) {
          if (!this.isPhoto) {
            let { status, msg } = await delCommentById({ id: info.id });
            if (status == 200) {
              this.$emit('delCommentById', info);
            } else {
              this.$nav.showToastNone(msg);
            }
          } else {
            let { status, msg } = await delImageComment({ id: info.id });
            if (status == 200) {
              this.$emit('delCommentById', { id: info.id });
              this.$nav.showToastNone('删除成功');
            } else {
              this.$nav.showToastNone(msg);
            }
          }
          return;
        }
        this.$emit('topLevelReplies', info);
      },
      async secondLevelReplies(info, info2) {
        if (info2.is_my == 1) {
          let { status, msg } = await delCommentById({ id: info2.id });
          if (status == 200) {
            this.$emit('delCommentById', info2);
            this.$nav.showToastNone('删除成功');
          } else {
            this.$nav.showToastNone(msg);
          }
          return;
        }
        this.$emit('secondLevelReplies', info, info2);
      },
      async recoverComment(item, flag) {
        if (!!flag) {
          uni.showModal({
            title: '删除评论',
            content: '确定删除该条评论？',
            success: async (res) => {
              if (res.confirm) {
                let { code, msg } = await sheep.$api.family.delComment({ id: item.id });
                if (code == 1) {
                  this.$emit('delCommentById', item);
                  sheep.$helper.toast('删除成功');
                } else {
                  sheep.$helper.toast(msg);
                }
              }
            },
          });
          return;
        }
        if (item.is_my == 1) {
          return;
        }
        this.$emit('topLevelReplies', { ...item, top_id: item.id });
      },
      async recoverCommentChildren(item, info, flag) {
        if (!!flag) {
          uni.showModal({
            title: '删除评论',
            content: '确定删除该条评论？',
            success: async (res) => {
              if (res.confirm) {
                let { code, msg } = await sheep.$api.family.delComment({ id: item.id });
                if (code == 1) {
                  this.$emit('delCommentById', item);
                  sheep.$helper.toast('删除成功');
                } else {
                  sheep.$helper.toast(msg);
                }
              }
            },
          });
          return;
        }
        if (item.is_my == 1) {
          return;
        }
        this.$emit('topLevelReplies', { ...item, top_id: info.id });
      },
    },
  };
</script>

<template>
  <view class="commentsIndex flex flex-column mt_30"
        :style="{
          width: width,
          background:background
        }"
        style="border-radius: 8rpx"
  >
    <view class="flex align-center justify-between"
          style="border-bottom: 2rpx solid #E3E3E3;padding-bottom: 10rpx;"
    >
      <view class="flex align-center">
        <image :src="`${IMG_URL}/index/circle_icon_pinglun.png`" class="wh_25 hW_25 ml_18"></image>
        <view class="fs_24 fw_500 color_4B4B4B ml_10">
          评论
        </view>
      </view>
      <view class="fs_24 fw_500 color_4B4B4B mr_18">
        查看全部
      </view>
    </view>
    <view class="mt_10 flex flex-column" v-for="(item, index) in commentsList" :key="index">
      <view class="ml_66 flex flex-sub">
        <image class="wh_52 hW_52" style="border-radius: 50%"
               :src="item.user_avatar.indexOf('http') != -1 ? item.user_avatar : `${nc_image}${item.user_avatar}`"></image>
        <view class="flex flex-column flex-sub ml_12">
          <view class="flex justify-between align-center">
            <view class="fs_24 fw_500" style="color: #1062fe;">{{ item.user_nickname }}</view>
            <view class="fs_17 fw_500 color_9F9F9F mr_29 flex align-center">
              <view>{{ dayjs(item.createtime * 1000).format('YYYY年MM月DD日 HH:mm:ss') }}</view>
<!--              <view class="ml_16" @click.stop="recoverComment(item,item.is_my == 1)">-->
<!--                {{ item.is_my == 1 ? '删除' : '回复' }}-->
<!--              </view>-->
            </view>
          </view>
          <view class="fs_24 fw_500 mr_29 color_9F9F9F mt_5" @click.stop="recoverComment(item,item.is_my == 1)">
            {{ item.content }}
          </view>
        </view>
      </view>
      <view class="ml_66 flex flex-sub mt_10" v-for="(item2, index2) in item.children" :key="index2">
        <image class="wh_52 hW_52" style="border-radius: 50%"
               :src="item2.user_avatar.indexOf('http') != -1 ? item2.user_avatar : `${nc_image}${item2.user_avatar}`"></image>
        <view class="flex flex-column flex-sub ml_12">
          <view class="flex justify-between align-center">
            <view class="fs_24 fw_500" style="color: #1062fe;">{{ item2.user_nickname }}</view>
            <view class="fs_17 fw_500 color_9F9F9F mr_29 flex align-center">
              <view>{{ dayjs(item2.createtime * 1000).format('YYYY年MM月DD日 HH:mm:ss') }}</view>
<!--              <view class="ml_16" @click.stop="recoverCommentChildren(item2,item,item2.is_my == 1)">-->
<!--                {{ item2.is_my == 1 ? '删除' : '回复' }}-->
<!--              </view>-->
            </view>
          </view>
          <view class="fs_24 fw_500 mr_29 color_9F9F9F mt_5"
                @click.stop="recoverCommentChildren(item2,item,item2.is_my == 1)">
            {{ !!item2.replay_name ? `回复${item2.replay_name}: ` : '' }}{{ item2.content }}
          </view>
        </view>
        <!--      <view class="commentsIndex_topReview flex">-->
        <!--        <text class="commentsIndex_topReview_nickname">{{ item.user_nickname }}</text>-->
        <!--        <text class="commentsIndex_topReview_colon">:</text>-->
        <!--        <text class="commentsIndex_topReview_content">{{ item.content }}</text>-->
        <!--        <text class="commentsIndex_topReview_reply ml_15" @click.stop="topLevelReplies(item)"-->
        <!--              v-if="isShowReply && !!item.children && item.children.length <= 0 && !is_share">-->
        <!--          {{ item.is_my == 1 ? '删除' : '回复' }}-->
        <!--        </text>-->
        <!--      </view>-->
        <!--      <view class="commentsIndex_topReview flex mt_10 ml_56" v-for="(item2, index2) in item.children" :key="index2">-->
        <!--        <text class="commentsIndex_topReview_nickname">{{ item2.user_nickname }}</text>-->
        <!--        <text class="commentsIndex_topReview_colon">:</text>-->
        <!--        <text class="commentsIndex_topReview_content">{{ item2.content }}</text>-->
        <!--        <text class="commentsIndex_topReview_reply ml_15" @click.stop="secondLevelReplies(item,item2)"-->
        <!--              v-if="isShowReply  && !is_share">-->
        <!--          {{ item2.is_my == 1 ? '删除' : '回复' }}-->
        <!--        </text>-->
        <!--      </view>-->
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .commentsIndex {
    margin-bottom: 15rpx;
    padding: 10rpx 0;

    .commentsIndex_topReview {
      .commentsIndex_topReview_nickname {
        white-space: nowrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #696969;
      }

      .commentsIndex_topReview_colon {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #696969;
      }

      .commentsIndex_topReview_content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #656565;
        //line-height: 35rpx;
        letter-spacing: 2rpx;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
      }

      .commentsIndex_topReview_reply {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        white-space: nowrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18rpx;
        color: #1062FE;
      }
    }
  }
</style>